<!DOCTYPE html>
<html lang="zh">
<head>
  <title>滚动刷新：ion-infinite-scroll/title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
    </head>
<body ng-app="starter">
<ion-header-bar class="bar-positive">
  <h4 class="title">这里是头部</h4>
</ion-header-bar>

<ion-content ng-controller="myCtrl">
  <ul class="list">
    <li class="item" ng-repeat="item in items">{{item}}</li>
    <li class="item" ng-if="!moreDataCanBeLoaded()">没有更多数据</li>
  </ul>
  <!--NOTE
      prop distance str 可选，从底部触发on-infinite表达式的距离，默认为1%
      prop spinner str 可选，加载时显示转轮等待指示框
      infinite on-infinite exp 必选，当滚动到底部时触发
  -->
  <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" on-infinite="loadMore()" distance="1%">
  </ion-infinite-scroll>
</ion-content>

<ion-footer-bar class="bar-positive">
  <h4 class="title">这里是底部</h4>
</ion-footer-bar>

<script src="../../lib/ionic/js/ionic.bundle.js"></script>
<script src="../../js/app.js"></script>
<script>
  angular.module("starter", ["ionic"]).controller("myCtrl", function ($scope, $timeout) {
    //初始化加载更多数据的次数
    $scope.loadTimes = 1;
    $scope.moreDataCanBeLoaded = function () {
      return $scope.loadTimes > 0;
    };
    //初始化数据
    $scope.items = [];
    for (let i = 1; i <= 20; i++) {
      $scope.items.push(`第${i}条数据`);
    }
    //页面滚动到底部需要调用的方法
    $scope.loadMore = function () {
      $timeout(function () {
        //加载完毕通知容器更新滚动视图（收起图标）
        $scope.$broadcast("scroll.infiniteScrollComplete");
      })
    }
  })
</script>
</body>
</html>
